<template>
    <el-dialog
            :close-on-click-modal="false"
            :model-value="api.editMenuState.visible"
            :title="api.editMenuState.title"
            destroy-on-close
            width="600"
            @close="api.onCloseEditMenu()"
    >

        <el-form
                ref="formRef"
                :model="api.editMenuState.form"
                :rules="rules"
                status-icon
        >
            <el-scrollbar class="fill-width" height="400px">
                <el-form-item
                        prop="menuList"
                >
                    <el-tree
                            ref="menuTree"
                            :data="menuApi.treeState.data"
                            :props="{label:'name'}"
                            class="fill-width"
                            node-key="id"
                            show-checkbox
                            @check="onMenuCheck"
                    />
                </el-form-item>
            </el-scrollbar>

            <div class="fill-width d-flex justify-end">
                <el-space class="mb-0">
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                    <el-button @click="api.onCloseEditMenu()">关闭</el-button>
                </el-space>
            </div>
        </el-form>
    </el-dialog>

</template>

<script lang="ts" setup>
import {onMounted, reactive, ref, watch} from "vue";
import {ElTree, FormRules} from "element-plus";
import {RoleApi} from "~/api/system/role/role.api";
import {MenuApi} from "~/api/system/menu/menu.api";

interface Props {
    api: RoleApi;
}

const {api} = withDefaults(defineProps<Props>(), {});
const formRef = ref();
const rules = reactive<FormRules>({
    name: [{required: true, message: "请输入公司名称", trigger: "blur"}],
    roleType: [{required: true, message: "请角选择色类型", trigger: "blur"}],
});

const menuApi = new MenuApi();
const menuTree = ref<InstanceType<typeof ElTree>>();

async function onSubmit() {
    const values = await formRef.value.validate();
    if (values) {
        api.editMenuState.form.permissionList = undefined;
        api.editMenuState.form.orgIdList = undefined;
        api.updateMenu(api.editMenuState.form).then((res: any) => {
            if (res.ok) {
                api.onCloseEditMenu();
            }
        });
    }
}

function onMenuCheck(checkedNodes: any, checkedKeys: any) {
    api.editMenuState.form.menuIdList = [];
    checkedKeys.checkedKeys.forEach((key: string) => {
        api.editMenuState.form.menuIdList?.push(key);
    });
    checkedKeys.halfCheckedKeys.forEach((key: string) => {
        api.editMenuState.form.menuIdList?.push(key);
    });
}

watch(() => api.editMenuState.form.id, value => {
    if (value) {
        api.editMenuState.form.menuIdList?.forEach(key => {
            menuTree.value!.setChecked(key, true, false);
        });
    }
});
onMounted(() => {
    menuApi.tree();
});
</script>

<style lang="scss" scoped>

</style>
